<template>
	<div class="container">
		<v-header :title="title"></v-header>
		<div class="startupPage">
			<div class="switch">
				<div>相册启动页</div>
				<div class="mui-switch mui-switch-mini mui-switch-blue" @click="titleSet()" ref="titleSet">
	              	<div class="mui-switch-handle"></div>
	            </div>
			</div>
			<div class="background-img">
				<div class="imgs">
					<div class="img-item">
						<div>
							<img src="../../common/images/add----.png"/>
							<div>从相册选取</div>
							<input type='file' accept='image/*' capture='camera' ref="backgroundImgGet" class="getImg" @change="backgroundImgGet"/>
						</div>
					</div>
					<div class="img-item" v-for="item in backgroundImgList" :style="{backgroundImage: 'url(' + item + ')' }" @click="defaultImgShow = !defaultImgShow">
						<img src="../../common/images/select10-.png" v-if="defaultImgShow"/>
					</div>
				</div>
				<div class="name">
					默认背景
				</div>
				<div class="explain">
					<div class="explain-item">
						<span class="dian"></span>
						自定义相册启动页设置请选择1080*1920大小 的图片						
					</div>
					<div class="explain-item">
						<span class="dian"></span>
						点击图片可设置标题						
					</div>
				</div>
			</div>
			<div class="switch">
				<div>加载图</div>
				<div></div>
			</div>
			<div class="background-load">
				<div class="imgs">
					<div class="img-item">
						<div>
							<img src="../../common/images/add----.png"/>
							<div>从相册选取</div>
							<input type='file' accept='image/*' capture='camera' ref="loadImgGet" class="getImg" @change="loadImgGet"/>
						</div>
					</div>
					<div class="img-item" v-for="item in loadImgList" @click="defaultLoadShow = !defaultLoadShow" :style="{backgroundImage: 'url(' + item + ')' }">
						<img src="../../common/images/select10-.png" v-if="defaultLoadShow"/>
					</div>
				</div>
				<div class="name">
					默认背景
				</div>
				<div class="explain">
					<div class="explain-item">
						<span class="dian"></span>
						自定义相册启动页设置请选择1080*1920大小 的图片						
					</div>
					<div class="explain-item">
						<span class="dian"></span>
						点击图片可设置标题						
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import VHeader from 'components/v-header'
	import VMask from 'components/v-mask'
	import Loading from 'components/loading'
	import BottomBar from 'components/bottom-bar'
	
	export default {
		components: {
			BottomBar,
			Loading,
			VMask,
			VHeader
		},
		data() {
			return {
				title: '启动页设置',
				list:[1,1],
				backgroundImgList: [],
				loadImgList: [],
				defaultImgShow: false,
				defaultLoadShow: false,
				titleShow: false
			}
		},
		methods: {
			backgroundImgGet() {
				var _this = this
				var reader = new FileReader();
				reader.readAsDataURL(this.$refs.backgroundImgGet.files[0]);
				reader.onload=function(e) {
			        _this.backgroundImgList.push(e.target.result);
			    };
			},
			titleSet() {
				this.titleShow = !this.titleShow
				if(this.titleShow) {
					this.$refs.titleSet.setAttribute('class','mui-switch mui-switch-mini mui-switch-blue mui-active')					
				} else {
					this.$refs.titleSet.setAttribute('class','mui-switch mui-switch-mini mui-switch-blue')
				}
			},
			loadImgGet() {
				var _this = this
				var reader = new FileReader();
				reader.readAsDataURL(this.$refs.loadImgGet.files[0]);
				reader.onload=function(e) {
			        _this.loadImgList.push(e.target.result);
			    };
			},
		}
	}
</script>

<style lang="stylus" scoped>
@import '../../common/stylus/mixin.styl'
@import '../../common/stylus/variable.styl'

	.container
		position fixed
		display flex
		flex-direction column
		width 100%
		height 100%
		background $color-bg-gray
		.startupPage
			overflow-y scroll
			.switch
				display flex
				font-size $font-size-small
				justify-content space-between
				background #fff
				align-items center
				height 50px
				padding 0 20px
				margin 10px 0
			.background-img
				padding 10px
				background #fff
				.imgs
					display -webkit-box
					overflow-x scroll
					.img-item
						background $color-bg-gray
						margin-right 5px
						background-size 100% 100%
						background-repeat no-repeat
						width 115px
						height 180px
						position relative
						&:first-child
							display flex
							justify-content center
							align-items center
							text-align center
							color #96a3ac
							font-size $font-size-small
							img
								width 40px
								height 40px
								position initial
								margin-bottom 5px
						&:last-child
							margin 0
						img
							width 20px
							height 20px
							position absolute
							bottom 10px
							right 10px
						.getImg
							z-index 2
							position absolute
							top 28%
							left 10%
							width 90px
							height 80px
							opacity 0
				.name
					width 100%
					text-align center
					font-size $font-size-small
					padding 5px 0 0
				.explain
					
					.explain-item
						padding 5px 20px
						display flex
						align-items center
						color #a8acb3
						font-size $font-size-mini
						span
							width 4px
							height 4px
							background #a8acb3
							border-radius 50%
							margin-right 10px
			.background-load
				padding 10px
				background #fff
				.imgs
					display -webkit-box
					overflow-x scroll
					.img-item
						background $color-bg-gray
						margin-right 5px
						width 115px
						height 110px
						background-size 100% 100%
						background-repeat no-repeat
						position relative
						&:first-child
							display flex
							justify-content center
							align-items center
							text-align center
							color #96a3ac
							font-size $font-size-small
							img
								width 40px
								height 40px
								position initial
								margin-bottom 5px
						&:last-child
							margin 0
						img
							width 20px
							height 20px
							position absolute
							bottom 10px
							right 10px
						.getImg
							z-index 2
							position absolute
							top 28%
							left 10%
							width 90px
							height 80px
							opacity 0
				.name
					width 100%
					text-align center
					font-size $font-size-small
					padding 5px 0 0
				.explain
					
					.explain-item
						padding 5px 20px
						display flex
						align-items center
						color #a8acb3
						font-size $font-size-mini
						span
							width 4px
							height 4px
							background #a8acb3
							border-radius 50%
							margin-right 10px
</style>